<template>
  <div class="non-content">
    <img src="@/assets/images/404.png" />
    <div class="non-box">
      <a-row class="box-title">404</a-row>
      <a-row class="box-description">很抱歉，您要访问的页面地址有误，</a-row>
      <a-row class="box-description">或者该页面不存在。</a-row>
      <a-row class="box-button">
        <a-button type="primary" class="button-normal return-button" @click="goBack">
          返回上一页
        </a-button>
      </a-row>
    </div>
  </div>
</template>
<script lang="ts" setup name="404">
import { useRouter } from 'vue-router'

const router = useRouter()

function goBack() {
  router.go(-1) // 后退到上一页
}
</script>
<style lang="less" scoped>
.non-content {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  img {
    width: 500px;
    height: 500px;
  }
  .non-box {
    width: 340px;
    color: #3d3d3d;
    .box-title {
      font-size: 80px;
      font-weight: 500;
    }
    .box-description {
      font-size: 20px;
      line-height: 30px;
    }
    .box-button {
      margin-top: 20px;
      .return-button {
        height: 32px;
        font-size: 14px;
      }
    }
  }
}
</style>
